@using OurWedding1
@model IEnumerable<OurWedding1.Models.ExpensePhoto>


@{
    ViewBag.Title = Resources.ExpensePhotos;
}

@Html.Partial("ExpensesHeading")

<h2>@ViewBag.Title</h2>

<div class="margintop">
    <ul id="sortable">
        @foreach (var item in Model)
        {
            <li class="ui-widget-content ui-corner-all uiframe">
                <div class="ui-icon ui-icon-arrowthick-2-n-s arrow"></div>
                <a href="http://res.cloudinary.com/hdq73umpz/image/upload/w_640,h_480,c_fill/@item.GenerateImageFileName()" class="detailsIconLink" rel="lightbox[list]">
                    <img style="border: 0" width="180" height="64" src="http://res.cloudinary.com/hdq73umpz/image/upload/c_thumb,h_48,w_180,r_3/@item.GenerateImageFileName()" alt=""/>
                </a>

                <span style="vertical-align: text-bottom">
                    @Html.ActionLink("Delete", "Delete", new { id = item.ExpensePhotoId }, new { @class = "deleteIconLink" })
                </span>

            </li>
        }
    </ul>
</div>

<div id="toolbar" class="ui-widget-header ui-corner-all">
    @Html.ActionLink(Resources.Back_To_List, "Details", "Expenses", new { id = ViewBag.ExpenseId }, new { @class = "backButtonLink" })
    @Html.ActionLink(Resources.ExpensePhotos_Upload, "Upload", new { id = ViewBag.ExpenseId }, new { @class = "uploadButtonLink" })

</div>



@section Scripts{
    @Scripts.Render("~/bundles/lightbox")
    @Scripts.Render("~/bundles/functions")


    <script type="text/javascript">
        $(function () {
            $(".deleteIconLink").button({
                icons: {
                    primary: "ui-icon-trash"
                },
                text: false
            }).addClass("text-bottom");
            $("#sortable").sortable();
            $("#sortable").disableSelection();
            $(".uploadButtonLink").button({
                icons: {
                    primary: "ui-icon-circle-plus"
                }
            });
            $(".backButtonLink").button({
                icons: {
                    primary: "ui-icon-triangle-1-w"
                }
            });
        });


    </script>
}